<!DOCTYPE>
<html>
<head>
	<meta charset="utf-8" />
	<title>列表页---电商网站</title>	
	<link rel="stylesheet" type="text/css" href="css/reset.css">
	<link rel="stylesheet" type="text/css" href="css/main.css">
	<script type="text/javascript" src="js/myfocus-2.0.1.min.js"></script><!--引入myFocus库-->
	<script type="text/javascript" src="js/myfocus_zdy.js"></script><!--自定义myfocus-->
</head>
<body>
<div class="headerBar">
	<div class="topBar">
		<div class="comWidth">
			<div class="leftArea">
				<a href="#" class="collection">收藏慕课</a>
			</div>
			<div class="rightArea">
				欢迎来到慕课网！<a href="">[登录]</a><a href="">[免费注册]</a>
			</div>
		</div>
	</div><!-- topBar结束 -->
	<div class="logoBar ">
		<div class="comWidth">	
			<div class="logo fl">
				<a href="#"><img src="images/logo.png" alt="慕课网"></a>
			</div>
			<div class="search_box fl">
				<input type="text" class="search_text fl" />
				<input type="button" value="搜 索" class="search_btn fr">
			</div>
			<div class="shopCar fr">
				<span class="shopText fl">购物车</span>
				<span class="shopNum fl">25</span>
			</div>
		</div>
	</div><!--  logoBar结束  -->
	<div class="navbox">
		<div class="comWidth">
			<div class="shopClass fl">
				<h3  class="active">全部商品分类<i></i></h3>
				
			</div>
			<ul class="nav fl">
				<li><a href="#">数码城</a></li>
				<li><a href="#">天黑黑</a></li>
				<li><a href="#">团购</a></li>
				<li><a href="#">二手特卖</a></li>
				<li><a href="#">名品会</a></li>
			</ul>
		</div>
	</div><!-- navBar结束 -->
</div><!-- headerBar结束 -->
<div class="comWidth clearfix products">
	<div class="leftArea">
		<div class="leftNav">
			<h3 class="nav_title ">手机、数码</h3>
			<div class="nav_cont clearfix">
				<h3>手机通讯</h3>
				<ul class="navCont_list">
					<li><a href="#">全部手机</a></li>
					<li><a href="#">全部手机</a></li>
					<li><a href="#">双卡手机</a></li>
					<li><a href="#">全部手机</a></li>
					<li><a href="#">自拍神器</a></li>
					<li><a href="#">全部手机</a></li>
					<li><a href="#">双卡手机</a></li>
				</ul>
			</div>
			<div class="nav_cont clearfix">
				<h3>手机通讯</h3>
				<ul class="navCont_list">
					<li><a href="#">全部手机</a></li>
					<li><a href="#">全部手机</a></li>
					<li><a href="#">双卡手机</a></li>
					<li><a href="#">全部手机</a></li>
					<li><a href="#">自拍神器</a></li>
					<li><a href="#">全部手机</a></li>
					<li><a href="#">双卡手机</a></li>
				</ul>
			</div>
			<div class="nav_cont clearfix">
				<h3>手机通讯</h3>
				<ul class="navCont_list">
					<li><a href="#">全部手机</a></li>
					<li><a href="#">全部手机</a></li>
					<li><a href="#">双卡手机</a></li>
					<li><a href="#">全部手机</a></li>
					<li><a href="#">自拍神器</a></li>
					<li><a href="#">全部手机</a></li>
					<li><a href="#">双卡手机</a></li>
				</ul>
			</div>
			<div class="nav_cont clearfix">
				<h3>手机通讯</h3>
				<ul class="navCont_list">
					<li><a href="#">全部手机</a></li>
					<li><a href="#">全部手机</a></li>
					<li><a href="#">双卡手机</a></li>
					<li><a href="#">全部手机</a></li>
					<li><a href="#">自拍神器</a></li>
					<li><a href="#">全部手机</a></li>
					<li><a href="#">双卡手机</a></li>
				</ul>
			</div>
			<div class="nav_cont clearfix">
				<h3>手机通讯</h3>
				<ul class="navCont_list">
					<li><a href="#">全部手机</a></li>
					<li><a href="#">全部手机</a></li>
					<li><a href="#">双卡手机</a></li>
					<li><a href="#">全部手机</a></li>
					<li><a href="#">自拍神器</a></li>
					<li><a href="#">全部手机</a></li>
					<li><a href="#">双卡手机</a></li>
				</ul>
			</div>
		</div>
	</div><!-- leftArea结束 -->
	<div class="rightArea">
		<div class="banner " id="picbox">
			<div class="pic"><!--内容列表(li数目可随意增减)-->
			  	<ul>
			        <li><a href="#"><img src="images/banner01.png" thumb="" alt="标题1"/></a></li>
			        <li><a href="#"><img src="images/banner02.png" thumb="" alt="标题2"/></a></li>
			        <li><a href="#"><img src="images/banner01.png" thumb="" alt="标题3"/></a></li>	       
			  	</ul>
		  	</div>
		</div><!-- banner结束 -->
		<div class="hr_7"></div>
		<div class="products_title">
			<h3>数码影像</h3>
		</div>
		<div class="products_list clearfix">
			<div class="item_cont">
				<div class="item">
					<div class="img_item">
						<a href="#"><img src="images/lb01.gif" alt=""></a>
					</div>
					<p><a href="#">文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍</a></p>
					<p class="money">￥888</p>
					<p>评论：<span class="stars"></span><span class="stars"></span><span class="stars"></span><span class="stars"></span><span class="stars"></span><a href="#">(78条)</a></p>
				</div>
			</div><!-- item_contEnd -->
			<div class="item_cont">
				<div class="item">
					<div class="img_item">
						<a href="#"><img src="images/lb02.gif" alt=""></a>
					</div>
					<p><a href="#">文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍</a></p>
					<p class="money">￥888</p>
					<p>评论：<span class="stars"></span><span class="stars"></span><span class="stars"></span><span class="stars"></span><span class="stars"></span><a href="#">(78条)</a></p>
				</div>
			</div><!-- item_contEnd -->
			<div class="item_cont">
				<div class="item">
					<div class="img_item">
						<a href="#"><img src="images/lb03.gif" alt=""></a>
					</div>
					<p><a href="#">文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍</a></p>
					<p class="money">￥888</p>
					<p>评论：<span class="stars"></span><span class="stars"></span><span class="stars"></span><span class="stars"></span><span class="stars"></span><a href="#">(78条)</a></p>
				</div>
			</div><!-- item_contEnd -->
			<div class="item_cont">
				<div class="item">
					<div class="img_item">
						<a href="#"><img src="images/lb04.gif" alt=""></a>
					</div>
					<p><a href="#">文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍</a></p>
					<p class="money">￥888</p>
					<p>评论：<span class="stars"></span><span class="stars"></span><span class="stars"></span><span class="stars"></span><span class="stars"></span><a href="#">(78条)</a></p>
				</div>
			</div><!-- item_contEnd -->
			<div class="item_cont">
				<div class="item">
					<div class="img_item">
						<a href="#"><img src="images/lb05.gif" alt=""></a>
					</div>
					<p><a href="#">文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍</a></p>
					<p class="money">￥888</p>
					<p>评论：<span class="stars"></span><span class="stars"></span><span class="stars"></span><span class="stars"></span><span class="stars"></span><a href="#">(78条)</a></p>
				</div>
			</div><!-- item_contEnd -->
			<div class="item_cont">
				<div class="item">
					<div class="img_item">
						<a href="#"><img src="images/lb03.gif" alt=""></a>
					</div>
					<p><a href="#">文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍</a></p>
					<p class="money">￥888</p>
					<p>评论：<span class="stars"></span><span class="stars"></span><span class="stars"></span><span class="stars"></span><span class="stars"></span><a href="#">(78条)</a></p>
				</div>
			</div><!-- item_contEnd -->
			<div class="item_cont">
				<div class="item">
					<div class="img_item">
						<a href="#"><img src="images/lb02.gif" alt=""></a>
					</div>
					<p><a href="#">文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍</a></p>
					<p class="money">￥888</p>
					<p>评论：<span class="stars"></span><span class="stars"></span><span class="stars"></span><span class="stars"></span><span class="stars"></span><a href="#">(78条)</a></p>
				</div>
			</div><!-- item_contEnd -->
			<div class="item_cont">
				<div class="item">
					<div class="img_item">
						<a href="#"><img src="images/lb04.gif" alt=""></a>
					</div>
					<p><a href="#">文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍</a></p>
					<p class="money">￥888</p>
					<p>评论：<span class="stars"></span><span class="stars"></span><span class="stars"></span><span class="stars"></span><span class="stars"></span><a href="#">(78条)</a></p>
				</div>
			</div><!-- item_contEnd -->
		</div>
		<!-- 娱乐影音 -->
		<div class="hr_7"></div>
		<div class="products_title">
			<h3>娱乐影音</h3>
		</div>
		<div class="products_list clearfix">
			<div class="item_cont">
				<div class="item">
					<div class="img_item">
						<a href="#"><img src="images/lb06.gif" alt=""></a>
					</div>
					<p><a href="#">文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍</a></p>
					<p class="money">￥888</p>
					<p>评论：<span class="stars"></span><span class="stars"></span><span class="stars"></span><span class="stars"></span><span class="stars"></span><a href="#">(78条)</a></p>
				</div>
			</div><!-- item_contEnd -->
			<div class="item_cont">
				<div class="item">
					<div class="img_item">
						<a href="#"><img src="images/lb07.gif" alt=""></a>
					</div>
					<p><a href="#">文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍</a></p>
					<p class="money">￥888</p>
					<p>评论：<span class="stars"></span><span class="stars"></span><span class="stars"></span><span class="stars"></span><span class="stars"></span><a href="#">(78条)</a></p>
				</div>
			</div><!-- item_contEnd -->
			<div class="item_cont">
				<div class="item">
					<div class="img_item">
						<a href="#"><img src="images/lb03.gif" alt=""></a>
					</div>
					<p><a href="#">文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍</a></p>
					<p class="money">￥888</p>
					<p>评论：<span class="stars"></span><span class="stars"></span><span class="stars"></span><span class="stars"></span><span class="stars"></span><a href="#">(78条)</a></p>
				</div>
			</div><!-- item_contEnd -->
			<div class="item_cont">
				<div class="item">
					<div class="img_item">
						<a href="#"><img src="images/lb08.gif" alt=""></a>
					</div>
					<p><a href="#">文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍</a></p>
					<p class="money">￥888</p>
					<p>评论：<span class="stars"></span><span class="stars"></span><span class="stars"></span><span class="stars"></span><span class="stars"></span><a href="#">(78条)</a></p>
				</div>
			</div><!-- item_contEnd -->
			<div class="item_cont">
				<div class="item">
					<div class="img_item">
						<a href="#"><img src="images/lb05.gif" alt=""></a>
					</div>
					<p><a href="#">文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍</a></p>
					<p class="money">￥888</p>
					<p>评论：<span class="stars"></span><span class="stars"></span><span class="stars"></span><span class="stars"></span><span class="stars"></span><a href="#">(78条)</a></p>
				</div>
			</div><!-- item_contEnd -->
			<div class="item_cont">
				<div class="item">
					<div class="img_item">
						<a href="#"><img src="images/lb06.gif" alt=""></a>
					</div>
					<p><a href="#">文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍</a></p>
					<p class="money">￥888</p>
					<p>评论：<span class="stars"></span><span class="stars"></span><span class="stars"></span><span class="stars"></span><span class="stars"></span><a href="#">(78条)</a></p>
				</div>
			</div><!-- item_contEnd -->
			<div class="item_cont">
				<div class="item">
					<div class="img_item">
						<a href="#"><img src="images/lb07.gif" alt=""></a>
					</div>
					<p><a href="#">文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍</a></p>
					<p class="money">￥888</p>
					<p>评论：<span class="stars"></span><span class="stars"></span><span class="stars"></span><span class="stars"></span><span class="stars"></span><a href="#">(78条)</a></p>
				</div>
			</div><!-- item_contEnd -->
			<div class="item_cont">
				<div class="item">
					<div class="img_item">
						<a href="#"><img src="images/lb08.gif" alt=""></a>
					</div>
					<p><a href="#">文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍</a></p>
					<p class="money">￥888</p>
					<p>评论：<span class="stars"></span><span class="stars"></span><span class="stars"></span><span class="stars"></span><span class="stars"></span><a href="#">(78条)</a></p>
				</div>
			</div><!-- item_contEnd -->
		</div>
	</div><!-- rightArea结束 -->
</div><!-- products -->
<div class="hr_15"></div>
<div class="footer"><!-- -->
	<p>
		<a href="#">网站首页</a><i>|</i>
		<a href="#">人才招聘</a><i>|</i>
		<a href="#">联系我们</a><i>|</i>
		<a href="#">慕课云</a><i>|</i>
		<a href="#">关于我们</a><i>|</i>
		<a href="#">讲师招募</a><i>|</i>
		<a href="#">意见反馈</a><i>|</i>
		<a href="#">友情链接</a>
	</p>
	<p>Copyright &copy; 2015 imooc.com All Rights Reserved | 京ICP备 13046642号-2</p>
	<p class="web">
		<a herf="#"><img src="images/weblogo.gif" alt=""></a>
		<a herf="#"><img src="images/weblogo.gif" alt=""></a>
		<a herf="#"><img src="images/weblogo.gif" alt=""></a>
		<a herf="#"><img src="images/weblogo.gif" alt=""></a>
	</p>
</div>
</body>
</html>
